﻿@{
  var user = ViewBag.User;
  }
  
  
  <!DOCTYPE html>
  <html lang="en">
  
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ShopForWeb.UI</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap-icons-1.10.0//bootstrap-icons.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ShopForWeb.UI.styles.css" asp-append-version="true" />
    @await RenderSectionAsync("CustomCss", required: false)
  </head>
  
  <body>
    <header>
      <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container-fluid">
          <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">
            <div class="display-6">
              <i class="bi bi-shop p-2"></i>网上商城
            </div>
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
              <li class="nav-item">
                <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">首页</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-dark" asp-area="" asp-controller="Product" asp-action="Index">商品</a>
              </li>
            </ul>
            @if (user == null)
            {
            <form class="row g-3">
  
              <div class="col-auto">
                <label for="input-phone" class="visually-hidden">电话</label>
                <input type="text" class="form-control" id="input-phone" placeholder="请输入电话">
              </div>
              <div class="col-auto">
                <label for="input-password" class="visually-hidden">密码</label>
                <input type="password" class="form-control" id="input-password" placeholder="请输入密码">
              </div>
              <div class="col-auto">
                <button type="button" class="btn btn-outline-primary" id="btn-login">登录</button>
              </div>
              <div class="col-auto">
                <a class="btn btn-outline-success" asp-area="" asp-controller="Identity" asp-action="Regsiter">
                  注册
  
                </a>
              </div>
            </form>
  
            }
            else
            {
            <ul class="navbar-nav flex-grow-1 justify-content-end">
              <li class="nav-item">
                <a class="nav-link text-dark" asp-area="" asp-controller="ShopCar" asp-action="Index">购物车</a>
              </li>
              <li class="nav-item">
                <a class="nav-link text-dark" asp-area="" asp-controller="Order" asp-action="Index">订单</a>
              </li>
              <li class="nav-item">
                <a id="btn-logout" class="nav-link text-dark" href="javascript:void(0)">
                  安全退出
                </a>
              </li>
            </ul>
            }
          </div>
        </div>
      </nav>
    </header>
    <div class="container">
      <main role="main" class="pb-3">
        @RenderBody()
      </main>
    </div>
  
    <footer class="border-top footer text-muted">
      <div class="container">
        &copy; 2025 - ShopForWeb.UI - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
      </div>
    </footer>
  
    <!-- 自定义 alert 模态框 -->
    <div class="modal fade" id="customAlertModal" tabindex="-1" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title text-primary" id="customAlertTitle">提示</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body d-flex align-items-center" id="customAlertBody">
            这里是提示内容
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

      <!-- 自定义 confirm 模态框 -->
  <div class="modal fade" id="customConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title text-primary" id="customConfirmTitle">询问</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body d-flex align-items-center" id="customConfirmBody">
          这里是询问内容
        </div>
        <div class="modal-footer">
          <button id="btnConfirmYes" type="button" class="btn btn-primary"
            data-bs-dismiss="modal">确定</button>&nbsp;&nbsp;
          <button type="button" class="btn btn-outline-info" data-bs-dismiss="modal">取消</button>
        </div>
      </div>
    </div>
  </div>

    @await RenderSectionAsync("CustomModal", required: false)
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    <script lang="javascript">
      const handleLogin = () => {
        let data = {
          phone: $("#input-phone").val(),
          password: $("#input-password").val()
        }
        $.ajax({
          type: "post",
          url: "/identity/login",
          data: data,
          dataType: "json",
          success: function (response) {
            customAlert(response, () => {
              location.reload();
            })
          }
        });
      }
      const handLogout = () => {
        $.ajax({
          type: "get",
          url: "/identity/logout",
  
          success: function (response) {
            customAlert(response, () => location.href = "/");
          }
        });
      }
  
      $(document).ready(function () {
        $("#btn-login").on("click", handleLogin);
        $("#btn-logout").on("click", handLogout);
      });
    </script>
    @await RenderSectionAsync("CustomScript", required: false)
  </body>
  
  </html>
  